<template>
    <div class="bigbox">
        <div class="pageheader">
            <div class="bkimg">
                <img src="http://imgfile.xxkdjy.top/fgbnm.jpg">
                <div class="title">
                    <span>搜藏</span>
                    <h1>藏宝阁</h1>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="item">
                <h1>
                    <svg t="1704971577892" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1974" width="32" height="32">
                        <path
                            d="M262.8096 357.2736h619.8272s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232H262.8096C206.7456 154.2656 161.28 199.68 161.28 255.744c0 56.064 45.4656 101.5296 101.5296 101.5296z"
                            fill="#F5D126" p-id="1975"></path>
                        <path
                            d="M882.6368 154.2656h-81.3056s-41.472 29.2864-41.472 92.7232c0 66.8672 41.472 110.2848 41.472 110.2848h81.3056s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232z"
                            fill="#F2B200" p-id="1976"></path>
                        <path
                            d="M262.8096 871.3728h619.8272s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232H262.8096c-56.064 0-101.5296 45.4656-101.5296 101.5296 0 56.064 45.4656 101.4784 101.5296 101.4784z"
                            fill="#FF6950" p-id="1977"></path>
                        <path
                            d="M882.6368 668.3648h-81.3056s-41.472 29.2864-41.472 92.7232c0 66.8672 41.472 110.2848 41.472 110.2848h81.3056s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232z"
                            fill="#F4403B" p-id="1978"></path>
                        <path
                            d="M882.6368 372.6336H262.8096c-64.4608 0-116.8896-52.4288-116.8896-116.8896s52.4288-116.8896 116.8896-116.8896H882.688c6.7072 0 12.5952 4.352 14.6432 10.7008 2.048 6.4-0.3072 13.312-5.7856 17.2032-1.3312 0.9728-34.9696 26.0608-34.9696 80.1792 0 59.4944 36.9152 99.328 37.2736 99.7376 4.1984 4.4544 5.376 11.008 2.9696 16.64a15.49312 15.49312 0 0 1-14.1824 9.3184zM262.8096 169.6256c-47.5136 0-86.1696 38.656-86.1696 86.1696s38.656 86.1696 86.1696 86.1696h589.7728c-12.5952-21.0432-26.7776-53.8624-26.7776-94.9248 0-34.4576 10.9568-60.0576 22.4256-77.3632H262.8096z"
                            fill="#333333" p-id="1979"></path>
                        <path
                            d="M781.1584 614.3488H161.28s41.472-43.4176 41.472-110.2848c0-63.4368-41.472-92.7232-41.472-92.7232h619.8272c56.064 0 101.5296 45.4656 101.5296 101.5296 0 56.0128-45.4144 101.4784-101.4784 101.4784z"
                            fill="#5BC7FC" p-id="1980"></path>
                        <path
                            d="M781.1072 411.2896h-76.2368c56.064 0 101.5296 45.4656 101.5296 101.5296 0 56.064-45.4656 101.5296-101.5296 101.5296h76.2368c56.064 0 101.5296-45.4656 101.5296-101.5296 0-56.064-45.4144-101.5296-101.5296-101.5296z"
                            fill="#25C3F4" p-id="1981"></path>
                        <path
                            d="M781.1584 629.7088H161.28c-6.144 0-11.7248-3.6864-14.1312-9.3184-2.4064-5.632-1.2288-12.1856 3.0208-16.64 0.3584-0.3584 37.2224-40.192 37.2224-99.6864 0-54.1184-33.6384-79.2064-35.072-80.2304a15.43168 15.43168 0 0 1-5.632-17.2032c2.048-6.3488 7.8848-10.6496 14.5408-10.6496h619.8272c64.4608 0 116.8896 52.4288 116.8896 116.8896s-52.3776 116.8384-116.7872 116.8384z m-589.824-30.72h589.7728c47.5136 0 86.1696-38.656 86.1696-86.1696s-38.656-86.1696-86.1696-86.1696H195.6864c11.4688 17.3056 22.4256 42.9056 22.4256 77.3632 0 41.0624-14.1824 73.9328-26.7776 94.976zM882.6368 886.7328H262.8096c-64.4608 0-116.8896-52.4288-116.8896-116.8896 0-64.4608 52.4288-116.8896 116.8896-116.8896H882.688a15.35488 15.35488 0 0 1 8.8576 27.904c-1.3312 0.9728-34.9696 26.0608-34.9696 80.1792 0 60.0064 36.864 99.328 37.2224 99.6864 4.2496 4.4544 5.4272 11.008 3.0208 16.64a15.4112 15.4112 0 0 1-14.1824 9.3696zM262.8096 683.7248c-47.5136 0-86.1696 38.656-86.1696 86.1696 0 47.5136 38.656 86.1696 86.1696 86.1696h589.7728c-12.5952-21.0432-26.7776-53.8624-26.7776-94.9248 0-34.4576 10.9568-60.0576 22.4256-77.3632H262.8096z"
                            fill="#333333" p-id="1982"></path>
                        <path
                            d="M524.0832 232.6016h-36.1984c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h36.1984c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM431.6672 232.6016H273.8176c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h157.8496c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM524.0832 485.0688h-36.1984c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h36.1984c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM431.6672 485.0688H273.8176c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h157.8496c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM524.0832 746.6496h-36.1984c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h36.1984c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM431.6672 746.6496H273.8176c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h157.8496c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36z"
                            fill="#FFFFFF" p-id="1983"></path>
                    </svg>
                    <span>书籍</span>
                </h1>
                <hr>
                <div class="bookbox">

                    <div class="bookitem">
                        <img src="../assets/img/vue.jpg">
                        <div class="diteil">
                            <div class="top">
                                <i class="iconfont icon-shuji"></i>
                                <span>书籍</span>
                            </div>
                            <div class="bottom">
                                <h1>vue设计与实现</h1>
                            </div>
                        </div>
                    </div>
                    <div class="bookitem">
                        <img src="../assets/img/js.jpg">
                        <div class="diteil">
                            <div class="top">
                                <i class="iconfont icon-shuji"></i>
                                <span>书籍</span>
                            </div>
                            <div class="bottom">
                                <h1>js高级程序设计</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <h1 style="margin-top: 10px;">
                    <svg t="1704971577892" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1974" width="32" height="32">
                        <path
                            d="M262.8096 357.2736h619.8272s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232H262.8096C206.7456 154.2656 161.28 199.68 161.28 255.744c0 56.064 45.4656 101.5296 101.5296 101.5296z"
                            fill="#F5D126" p-id="1975"></path>
                        <path
                            d="M882.6368 154.2656h-81.3056s-41.472 29.2864-41.472 92.7232c0 66.8672 41.472 110.2848 41.472 110.2848h81.3056s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232z"
                            fill="#F2B200" p-id="1976"></path>
                        <path
                            d="M262.8096 871.3728h619.8272s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232H262.8096c-56.064 0-101.5296 45.4656-101.5296 101.5296 0 56.064 45.4656 101.4784 101.5296 101.4784z"
                            fill="#FF6950" p-id="1977"></path>
                        <path
                            d="M882.6368 668.3648h-81.3056s-41.472 29.2864-41.472 92.7232c0 66.8672 41.472 110.2848 41.472 110.2848h81.3056s-41.472-43.4176-41.472-110.2848c0-63.4368 41.472-92.7232 41.472-92.7232z"
                            fill="#F4403B" p-id="1978"></path>
                        <path
                            d="M882.6368 372.6336H262.8096c-64.4608 0-116.8896-52.4288-116.8896-116.8896s52.4288-116.8896 116.8896-116.8896H882.688c6.7072 0 12.5952 4.352 14.6432 10.7008 2.048 6.4-0.3072 13.312-5.7856 17.2032-1.3312 0.9728-34.9696 26.0608-34.9696 80.1792 0 59.4944 36.9152 99.328 37.2736 99.7376 4.1984 4.4544 5.376 11.008 2.9696 16.64a15.49312 15.49312 0 0 1-14.1824 9.3184zM262.8096 169.6256c-47.5136 0-86.1696 38.656-86.1696 86.1696s38.656 86.1696 86.1696 86.1696h589.7728c-12.5952-21.0432-26.7776-53.8624-26.7776-94.9248 0-34.4576 10.9568-60.0576 22.4256-77.3632H262.8096z"
                            fill="#333333" p-id="1979"></path>
                        <path
                            d="M781.1584 614.3488H161.28s41.472-43.4176 41.472-110.2848c0-63.4368-41.472-92.7232-41.472-92.7232h619.8272c56.064 0 101.5296 45.4656 101.5296 101.5296 0 56.0128-45.4144 101.4784-101.4784 101.4784z"
                            fill="#5BC7FC" p-id="1980"></path>
                        <path
                            d="M781.1072 411.2896h-76.2368c56.064 0 101.5296 45.4656 101.5296 101.5296 0 56.064-45.4656 101.5296-101.5296 101.5296h76.2368c56.064 0 101.5296-45.4656 101.5296-101.5296 0-56.064-45.4144-101.5296-101.5296-101.5296z"
                            fill="#25C3F4" p-id="1981"></path>
                        <path
                            d="M781.1584 629.7088H161.28c-6.144 0-11.7248-3.6864-14.1312-9.3184-2.4064-5.632-1.2288-12.1856 3.0208-16.64 0.3584-0.3584 37.2224-40.192 37.2224-99.6864 0-54.1184-33.6384-79.2064-35.072-80.2304a15.43168 15.43168 0 0 1-5.632-17.2032c2.048-6.3488 7.8848-10.6496 14.5408-10.6496h619.8272c64.4608 0 116.8896 52.4288 116.8896 116.8896s-52.3776 116.8384-116.7872 116.8384z m-589.824-30.72h589.7728c47.5136 0 86.1696-38.656 86.1696-86.1696s-38.656-86.1696-86.1696-86.1696H195.6864c11.4688 17.3056 22.4256 42.9056 22.4256 77.3632 0 41.0624-14.1824 73.9328-26.7776 94.976zM882.6368 886.7328H262.8096c-64.4608 0-116.8896-52.4288-116.8896-116.8896 0-64.4608 52.4288-116.8896 116.8896-116.8896H882.688a15.35488 15.35488 0 0 1 8.8576 27.904c-1.3312 0.9728-34.9696 26.0608-34.9696 80.1792 0 60.0064 36.864 99.328 37.2224 99.6864 4.2496 4.4544 5.4272 11.008 3.0208 16.64a15.4112 15.4112 0 0 1-14.1824 9.3696zM262.8096 683.7248c-47.5136 0-86.1696 38.656-86.1696 86.1696 0 47.5136 38.656 86.1696 86.1696 86.1696h589.7728c-12.5952-21.0432-26.7776-53.8624-26.7776-94.9248 0-34.4576 10.9568-60.0576 22.4256-77.3632H262.8096z"
                            fill="#333333" p-id="1982"></path>
                        <path
                            d="M524.0832 232.6016h-36.1984c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h36.1984c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM431.6672 232.6016H273.8176c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h157.8496c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM524.0832 485.0688h-36.1984c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h36.1984c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM431.6672 485.0688H273.8176c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h157.8496c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM524.0832 746.6496h-36.1984c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h36.1984c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36zM431.6672 746.6496H273.8176c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h157.8496c8.4992 0 15.36 6.8608 15.36 15.36s-6.8608 15.36-15.36 15.36z"
                            fill="#FFFFFF" p-id="1983"></path>
                    </svg>
                    <span>编程好帮手</span>
                </h1>
                <hr>
                <div class="tool">
                    <a class="toolitem" href="https://cn.vuejs.org/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/2024013113291818691.jpg" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">vue</p>
                            <p class="discrib">易学易用,性能出色,的Web前端框架</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://emojixd.com/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/th.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">emojixd</p>
                            <p class="discrib">一本线上Emoji百科全书📚</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://www.sequelize.cn/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/logo.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">Sequelize</p>
                            <p class="discrib">一个基于 promise 的 Node.js ORM</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://cn.vitejs.dev/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/logo-with-shadow.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">Vite</p>
                            <p class="discrib">下一代的前端工具链</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://pinia.vuejs.org/zh/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/piaina.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">Pinia</p>
                            <p class="discrib">Vue.js 状态管理库</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://imzbf.github.io/md-editor-v3/en-US/index">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/md.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">md-editor-v3</p>
                            <p class="discrib">Markdown编辑器Vue3版本</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://uniapp.dcloud.net.cn/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/uniapp.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">uni-app</p>
                            <p class="discrib">一个前端应用的框架</p>
                        </div>
                    </a>
                    <a class="toolitem" href="https://element-plus.org/zh-CN/">
                        <div class="leftimg">
                            <img src="http://imgfile.xxkdjy.top/element.png" alt="">
                        </div>
                        <div class="righttext">
                            <p class="title">Element Plus</p>
                            <p class="discrib">基于Vue3面向设计师和开发者的组件库</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
hr {
    position: relative;
    margin-bottom: 2rem;
    border: 2px dashed #a4d8fa;
    width: calc(100% - 4px);
}

.bigbox {
    @include bk-style;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 100%;

    /*  */
    /* background-color: getThemeValue("ToolbigboxColor"); */
    .pageheader {
        height: 350px;
        position: relative;

        /* background-color: getThemeValue("ToolheaderColor"); */
        .bkimg {
            height: 80%;
            width: 70%;
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 25px;
            transform: translate(-50%, -50%);

            &::after {
                height: 100%;
                width: 100%;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 25px;

                @include userTheme {
                    background-color: getThemeValue("imgmask");
                }
            }

            .title {
                cursor: pointer;
                position: absolute;
                top: 0;
                padding: 10px 20px;
                background-image: -webkit-linear-gradient(bottom, #b3a8d0, #f8d3a0, #d7999c);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;

                @include userTheme {
                    font-family: getThemeValue("fontfamily");
                    color: getThemeValue("fontColor");
                }

                h1 {
                    margin-top: 10px;
                    font-size: $font-size-xl;

                }
            }

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                border-radius: 15px;
                transform: translate(-50%, -50%);
                height: 100%;
                width: 100%;

                object-fit: cover;
            }
        }
    }

    .content {
        width: 70%;

        @include userTheme {
            color: getThemeValue("fontColor");
            background-color: getThemeValue("ToolcontentColor");
        }

        margin: 0 auto;
        padding: 15px;

        .item {
            width: 100%;

            h1 {
                font-size: $font-size-xl;

                @include userTheme {
                    font-family: getThemeValue("fontfamily");
                    color: getThemeValue("fontColor");
                }

                span {
                    vertical-align: top;
                }
            }

            .bookbox {
                display: flex;
                justify-content: start;
                flex-wrap: wrap;

                .bookitem {
                    height: 200px;
                    margin-right: 10px;
                    border-radius: 15px;
                    min-width: 150px;
                    flex: 1;
                    margin-bottom: 10px;
                    max-width: 20%;
                    position: relative;
                    transition: all 0.3s;

                    img {

                        height: 100%;
                        width: 100%;
                        border-radius: 15px;
                    }

                    &:hover {
                        transform: translateY(-10px);
                    }

                    &:hover::after {
                        opacity: 0;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        left: 0;
                        top: 0;
                        background: rgba(0, 0, 0, .2);
                        z-index: 0;
                        -webkit-transition: .5s;
                        -moz-transition: .5s;
                        -o-transition: .5s;
                        -ms-transition: .5s;
                        transition: .5s;
                        border-radius: 15px;

                    }

                    .diteil {
                        @include userTheme {
                            font-family: getThemeValue("fontfamily");
                            color: getThemeValue("fontColor");
                        }

                        border-radius: 15px;
                        padding: 10px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        z-index: 99;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .top {
                            display: flex;
                            justify-content: space-between;

                            i {
                                font-size: $font-size-l;
                            }
                        }

                        .bottom {
                            h1 {
                                font-size: $font-size-m;
                                @include text-Onerow;
                            }
                        }
                    }
                }
            }

            .tool {
                padding-top: 300px;
                min-height: 300px;
                width: 100%;
                margin: 0 auto;
                padding: 15px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: start;
                align-content: start;
                max-height: 600px;
                overflow-y: scroll;

                &::-webkit-scrollbar {
                    /*隐藏滚轮*/
                    display: none;
                }

                .toolitem {
                    flex: 1;
                    max-width: 220px;
                    min-width: 200px;
                    background-color: #fff;
                    height: 80px;
                    border-radius: 10px;
                    margin: 5px;
                    display: flex;
                    justify-content: space-between;
                    padding: 10px;
                    flex-direction: row;
                    transition: all 0.5s ease-in-out;

                    @include userTheme {
                        background-color: getThemeValue("toolItemBg");
                        color: getThemeValue("fontColor");
                    }

                    &:hover .leftimg {
                        width: 0;
                        height: 0;
                        opacity: 0;
                    }

                    &:hover {
                        justify-content: start;
                        background-color: #f5f3f2;
                        box-shadow: 0 3px 6px 3px rgba(7, 17, 27, .15);
                    }

                    &:hover .righttext {
                        color: #fac03d;
                        width: 90%;
                    }

                    .leftimg {
                        transition: all 0.5s ease-in-out;
                        height: 60px;
                        width: 60px;
                        border-radius: 50%;

                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                            border-radius: 50%;
                        }
                    }

                    .righttext {
                        cursor: pointer;
                        width: 65%;
                        font-size: $font-size-m;

                        @include userTheme {
                            font-family: getThemeValue("fontfamily");
                            color: getThemeValue("fontColor");
                        }

                        .title {
                            margin-bottom: 5px;
                            font-size: $font-size-l;
                        }

                        .discrib {
                            @include text-Onerow;

                            @include userTheme {

                                color: getThemeValue("fontColor")
                            }
                        }
                    }
                }
            }

        }
    }
}

@media screen and (max-width: 650px) {
    .content {
        width: 100% !important;
    }

    .pageheader {
        height: 250px !important;

        .bkimg {
            width: 100% !important;
        }
    }

    .bookitem {
        min-width: 20% !important;
        max-width: 21% !important;
    }

    .tool {
        padding: 25px !important;

        .toolitem {
            width: 47% !important;
            flex: auto !important;
            max-width: none !important;
        }
    }
}

@media screen and (max-width: 470px) {
    .bookitem {
        min-width: 46% !important;
    }

}</style>